<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>老司机密码修改</title>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.css">
    <style>
        body {
            font-family:sans-serif;
            background: rgba(0,0,0,0);
        }
        .box {
            width:400px;
            position:absolute;
            color: #ba736d;
            top:50%;
            left:50%;
            transform:translate(-50%,-50%);
            text-align:center;
        }
        .box h1 {
            color: #0aecb7;
            text-transform:uppercase;
            font-weight:500;
        }
        .box input[type = "text"],.box input[type = "password"]{
            border:0;
            background:none;
            display:block;
            margin:3px auto;
            text-align:center;
            border:2px solid #3498db;
            padding:4px 10px;
            width:200px;
            outline:none;
            color: #259793;
            border-radius:24px;
            transition:0.25s;
        }
        .box input[type = "text"]:focus,.box input[type = "password"]:focus {
            width:280px;
            border-color:#2ecc71;
        }
        button{
            border:0;
            background:none;
            display:block;

            margin:5px auto;
            text-align:center;
            border:2px solid #2ecc71;
            padding:5px 40px;
            outline:none;
            color: #f1ed06;
            border-radius:24px;
            transition:0.25s;
            cursor:pointer;
        }
        .box a:hover {
            background:#2ecc71;
        }
        .message,.message2,.message3{
            color: red;
        }
        .checkbox{
            margin:0px auto;
        }
        .login-a{
            width:30px;
            height:80px;
        }


    </style>
</head>
<body>
    <form id="login-form"  >
        <!--设置隐藏域  -->
        <div class="box">
            <h1>老色批密码修改界面</h1>
            <input type="hidden" name="userId"  id="userId">
            账号： <input type="text" name="account" readonly id="account">
            请输入旧密码： <input type="password"  id="oldPassword">
            <p class="message"></p>
            请输入新密码： <input type="password"  id="newPassword">
            <p class="message3"></p>
            请重新输入新密码： <input type="password" name="password" id="newPassword2">
            <p class="message2"></p>
            <button id="sub" type="button">确认修改</button>
        </div>
    </form>
    <script type="text/javascript" src="../css/jquery-3.4.1.js"></script>
    <script src="../bootstrap/js/bootstrap.js" ></script>
    <script src="../vue/vue.js" charset="utf-8"></script>
    <script>
        $(function(){
            let password;
                $.post("../SystemUser/selSession",function(data){
                    data=data;
                    console.log(data);
                    $("h1").text("欢迎老色批"+data.employee.employeeName+"，请修改您的密码");
                    $("#account").val(data.employee.systemUser.account);
                    $("#userId").val(data.employee.systemUser.userId);
                    password=data.employee.systemUser.password;
                },"json")

            //新密码框的change事件
            $("#newPassword").change(function () {
                if($("#oldPassword").val() == $("#newPassword").val()){
                    $("#newPassword").val();
                    $(".message3").text("新密码不得与旧密码相同");
                }
            })

            //确认密码框的change事件
            $("#newPassword2").change(function () {
                if($("#newPassword2").val() != $("#newPassword").val()){
                    $("#newPassword2").val();
                    $(".message2").text("两次密码输入不一致");
                }else{
                    $(".message2").text("两次输入一致");
                }
            })

            //button按钮提交事件
            $("#sub").click(function(){
                //如果输入的旧密码与session中的旧密码相同则执行更改
                if ($("#newPassword2").val() == $("#newPassword").val()){
                    if ($("#oldPassword").val()==password  ){
                        //使用ajax异步提交修改密码
                        $.ajax({
                            type:"post",
                            data:$("#login-form").serialize(),
                            url:"../SystemUser/updPassword",
                            dataType:"json",
                            success:function (data) {
                                if (data.msg.toString()==""){
                                    alert("密码修改成功");
                                    window.top.location.href="../login.html";
                                }else{
                                    alert("密码修改失败");
                                }
                            }
                        })
                    }else{
                        $(".message").text("旧密码输入错误");
                    }
                }
            })
        })
    </script>
</body>
</html>